<template>
  <basic-container class="form-render">
    <div class="form-render-header">
      <el-button @click="handleBack" type="primary">返 回</el-button>
    </div>
    <h1 style="text-align: center">{{ form.name }}</h1>
    <el-divider></el-divider>
    <VFormRender
      :form-json="formJson"
      :form-data="formData"
      :option-data="optionData"
      ref="vFormRef"
      @formChange="onFormDataChange"
    >
    </VFormRender>
  </basic-container>
</template>

<script setup>
import { ref, onMounted,reactive } from 'vue';
import VFormRender from '@/components/form-render/index.vue';
import { getDetail } from '@/api/crf/crf.js';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const formJson = ref({});
const form = ref({});
const vFormRef = ref(null);
const formData = ref({});
const optionData = ref({});
const route = useRoute();
const router = useRouter();
onMounted(() => {
  getDetailData();
});
const getDetailData = async () => {
  const { data: res } = await getDetail(route.query.id);
  form.value = res.data;
  if (res.code == 200) {
    formJson.value = JSON.parse(res.data.content);
    vFormRef.value.setFormJson(formJson.value);
  }
};
const handleBack = () => {
  router.back()
};
const onFormDataChange = (data) => {
    console.log('data', data);

    
    console.log('vFormRef', vFormRef.value.getFieldWidgets());
    // console.log('vFormRef', vFormRef.value.hideWidgets("input46927"));
    
    // vFormRef.value.showWidgets("input46927")
//   formData.value = data;
};


</script>

<style lang="css" scoped>
.form-render {
  height: calc(100% - 5px);
  width: 100%;
}
</style>
